<template>
  <div class="layui-row">
      <top-lump>
        <div class="layui-btn-group">
            <button class="layui-btn" v-on:click="addEdit">增加</button>
            <button class="layui-btn">编辑</button>
            <button class="layui-btn">删除</button>
        </div>

      </top-lump>
      <info-lump>
        <div class="kgo-edit-title-sty">
            <span>标题</span>  <input v-model="editTitle" placeholder="请输入标题……">
        </div>
        <div id="editorElem" style="text-align:left"></div>
      </info-lump>
  </div>
</template>

<script>

import Edit from 'wangeditor'
export default {
    components: {
   
    },
    data () {
        return {
            editor:null,
            editTitle:"请输入标题",
            Url:this.$store.state.RootURL

        }
    },
   mounted(){
        layui.element.init();
        this.editor = new Edit('#editorElem');
         this.editor.customConfig.onchange = (html) => {
            this.editorContent = html
        }
        this. editor.create();

   },
   methods:{
       addEdit:function(){
           var $ = layui.$;
           var url = this.Url +"/document";
           var editData = {};
           editData.textContent = this.editor.txt.html();
           editData.textName = this.editTitle;
        console.log(JSON.stringify(editData) );
           $.post(url,editData,function(result){
                console.log(result);
            },"json");          
       }
   }
}
</script>

<style lang="scss">
.kgo-edit-title-sty{
    height: 60px;
}
.kgo-edit-title-sty span{
   font-size: 24px;
   font-weight: 600;
   margin-left: 30px;
 }
.kgo-edit-title-sty input{
    height: 60px;
    width: 60%;
    margin-left: 10%;
    border: none;
    font-size: 24px;
    font-weight: 600;
    text-align: center;
}
//修改富文本编辑器的高度
.w-e-text-container{
    height: 650px !important;
}
#editorElem{
    width: 80%;
    margin: 0 auto;
}

</style>
